<template>
  <div class="container">
    <div class="header_box">
      <span>
        <i></i>入驻企业数
        <b v-for="(a,i) in 6" :key="i">{{registerCompanyCount[i]}}</b>
      </span>
      <span>
        <i></i>活跃企业数
        <b v-for="(a,i) in 6" :key="i">{{activeCompanyCount[i]}}</b>
      </span>
      <span>
        <i></i>在招职位数
        <b v-for="(a,i) in 6" :key="i">{{onLineJobCount[i]}}</b>
      </span>
      <span>
        <i></i>投递简历数
        <b v-for="(a,i) in 6" :key="i">{{deliverResumeCount[i]}}</b>
      </span>
      <span>
        <i></i>提供总岗位数
        <b v-for="(a,i) in 6" :key="i">{{totalPositionsCount[i]}}</b>
      </span>
    </div>
    <div class="content">
      <div class="left_box">
        <monthStatistics></monthStatistics>
        <scale></scale>
      </div>
      <div class="middle_box">
        <img class='title' src="../../../assets/img/area.png" alt="">
        <dataMap></dataMap>
      </div>
      <div class="right_box">
        <nature></nature>
        <!-- <trade></trade>  -->
        <industry></industry>
      </div>
    </div>
  </div>
</template>

<script>
import { selectenterprisedatatop } from '../../../api/dataCenter';
import monthStatistics from './monthStatistics';
import scale from './scale';
import nature from './nature';
import dataMap from './dataMap';
import trade from './trade';
import industry from './industry';
export default {
  name: 'enterpriseData',
  data () {
    return {
      registerCompanyCount: 76040,
      activeCompanyCount: 11718,
      onLineJobCount: 5554,
      deliverResumeCount: 20720,
      totalPositionsCount: 29048
    };
  },
  created () {
    this.registerCompanyCount = this.registerCompanyCount
      .toString()
      .split('')
      .reverse();
    this.activeCompanyCount = this.activeCompanyCount
      .toString()
      .split('')
      .reverse();
    this.onLineJobCount = this.onLineJobCount
      .toString()
      .split('')
      .reverse();
    this.deliverResumeCount = this.deliverResumeCount
      .toString()
      .split('')
      .reverse();
    this.totalPositionsCount = this.totalPositionsCount
      .toString()
      .split('')
      .reverse();
  },
  components: {
    monthStatistics,
    scale,
    nature,
    dataMap,
    trade,
    industry
  }
};
</script>

<style scoped>
.container {
    padding: 0px 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    background: url('../../../assets/img/background.png') no-repeat;
    background-size: cover;
}
.header_box {
    background-color: none;
    display: flex;
    justify-content: space-between;
    height: 20px;
    font-size: 14px;
    font-family: FZLanTingHeiS;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 20px;
}
.header_box span {
    background: linear-gradient(90deg, rgba(8, 20, 151, 1) 0%, rgba(8, 20, 152, 0.06) 100%);
    border-radius: 4px;
    width: 250px;
    height: 30px;
    font-size: 14px;
    font-family: FZLanTingHeiS;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 30px;
    margin-left: 10px;
    overflow: hidden;
}
.header_box span i {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: rgba(0, 234, 255, 1);
    border-radius: 50%;
    margin: 0 10px;
}
.content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    overflow: auto;
}
.left_box {
    width: 500px;
}
.right_box {
    width: 500px;
}
.middle_box {
    color: rgba(255, 255, 255, 1);
    height: 770px;
    position: relative;
    flex: 1;
    text-align: center;
}
.title {
    position: absolute;
    top: 12px;
    left: 44px;
    width: 184px;
    height: 36px;
}
b {
    float: right;
    margin-top: 4px;
    margin-left: 8px;
    width: 14px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: rgba(10, 84, 234, 1);
    border-radius: 2px;
}
</style>
